<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="神领物流">
    <meta name="keywords" content="兔子">
    <title>车型管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="shortcut icon" href="favicon.ico" type="./favicon.ico">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
        integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Main CSS -->
    <link href="../../assets/css/main.css" rel="stylesheet" />

    <!-- Animation CSS -->
    <link href="../../assets/css/vendor/aos.css" rel="stylesheet" />

</head>

<body>
    <!-- 快捷导航开始 -->
    <div class="shortnav">
        <div class="wrapper">
            <ul>
                <li>
                    <a href="../../project_index.html">车型管理</a>
                </li>
                <li>
                    <a href="../../project_index.html">运费管理</a>
                </li>
                <li>
                    <a href="../../project_index.html">车辆管理</a>
                </li>
                <li>
                    <a href="../../project_index.html">司机管理</a>
                </li>
                <li>
                    <a href="../../project_index.html">排班管理</a>
                </li>
                <li>
                    <a href="../../project_index.html">订单管理</a>
                </li>
                <li>
                    <a href="../../project_index.html"><i class="iconfont icon-mobile-phone"></i>手机版</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航结束 -->
    <!-- 头部开始 -->
    <div class="header">
        <div class="wrapper">
            <!-- logo开始 -->
            <!-- <div class="logo"><a href="#">小兔仙儿</a></div> -->
            <div class="logo"><a href="#"><img src="./images/logo.png" alt=""></a></div>
            <!-- logo结束 -->
            <!-- 导航开始 -->
            <div class="nav">
                <ul>
                    <li>
                        <a href="../../project_index.html">搜索车型</a>
                    </li>
                    <li>
                        <a href="../../project_index.html">新增车型</a>
                    </li>
                    <li>
                        <a href="../../project_index.html">编辑车型</a>
                    </li>
                    <li>
                        <a href="../../project_index.html">删除车型</a>
                    </li>
                </ul>
            </div>
            <!-- 导航结束 -->
            <!-- 搜索开始 -->
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜一搜">
            </div>
            <!-- 搜索结束 -->
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- banner开始 -->
    <div class="banner">
        <div class="wrapper">
            <video id="v1" autoplay loop muted>
                <source src="./images/video.mp4" type="video/mp4" />
            </video>
            <div style="font-size: 20px; padding-top: 27px;background-color: #fff;width: 260px; margin:6px 6px;">
                <h4 style="margin-left: 33px;margin-bottom: 17px;;">车型管理主要技术</h4>
                <div style="margin-left: 33px;margin-bottom:13px ;">
                    <a href="#"><i class="iconfont icon-customer-service" style="color: #f55731;"></i></a>
                    <span>调用接口</span>
                    <p style="font-size: 15px;margin-top: 7px;">/truckType</p>
                </div>
                <div style="margin-left: 33px;margin-bottom:13px ;">
                    <a href="#"><i class="iconfont icon-favorites-fill" style="color: #f55731;"></i></a>
                    <span>生命周期函数</span>
                    <p style="font-size: 15px;margin-top: 7px;">mounted</p>
                </div>
                <div style="margin-left: 33px;margin-bottom:13px ;">
                    <a href="#"><i class="iconfont icon-mobile-phone" style="color: #f55731;"></i></a>
                    <span>表单验证</span>
                    <p style="font-size: 15px;margin-top: 7px;">validate</p>
                </div>
                <div style="margin-left: 33px;margin-bottom:13px ;">
                    <a href="#"><i class="iconfont icon-browse " style="color: #f55731;"></i></a>
                    <span>数据回填</span>
                    <p style="font-size: 15px;margin-top: 7px;">v-model</p>
                </div>
                <div style="margin-left: 33px;margin-bottom:13px ;">
                    <a href="#"><i class="iconfont icon-comment" style="color: #f55731;"></i></a>
                    <span>分页处理</span>
                    <p style="font-size: 15px;margin-top: 7px;">el-pagination</p>
                </div>
            </div>
            <ul class="right">
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- banner结束 -->
    <!-- 新鲜好物开始 -->
    <div class="new">
        <div class="wrapper">
            <div class="top">
                <div class="title" style="display: flex;align-items: center;margin-bottom: 10px;">

                    <span class="spinner-grow text-secondary" role="status" style="margin-left: 7px;">
                        <span class="visually-hidden">Loading...</span>
                    </span>
                    <h3 style="margin-left: 17px;">查询搜索</h3>
                    <!-- <p>新鲜出炉 品质靠谱</p> -->
                </div>
            </div>
            <img src="./images/查询搜索.png" alt="">
            <div style="width: 100%;background-color: #f9d4cb;padding: 10px;justify-content: space-between;">

                <div style="display: flex;justify-content: space-between;margin-top: 20px;">
                    <div style="width: 50%;">
                        <h4 style="color: #e15536;">Step1.将input框的每项数据绑定数据项</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/查询演示2.png" alt="" style="width: 237px;margin-right: 10px;">
                            <img src="./images/搜索演示1.png" alt="" style="width: 291px;">
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <h4 style="margin-top: 0px;color: #e15536;">Step2.给搜索按钮注册点击事件</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/查询演示2.png" alt="" style="width: 237px;margin-right: 10px;">
                            <img src="./images/搜索演示1.png" alt="" style="width: 291px;">
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div style="width: 50%;">
                        <h4 style="margin-top: 10px;color: #e15536;">Step3.点击重置按钮清空表单重新渲染页面</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/点击重置.png" alt="" style="width: 237px;margin-right: 10px;">
                            <!-- <img src="./images/搜索演示1.png" alt="" style="width: 291px;"> -->
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <img src="./images/car-example2.png"
                            style="height: 200px;width: 500px;margin-left: 20px;margin-top: 20px;" alt="">
                    </div>
                </div>
            </div>

            <!-- 新增车型 -->
            <div class="top">
                <div class="title" style="display: flex;align-items: center;margin-bottom: 10px;">

                    <span class="spinner-grow text-secondary" role="status" style="margin-left: 7px;">
                        <span class="visually-hidden">Loading...</span>
                    </span>
                    <h3 style="margin-left: 17px;">新增车型</h3>
                    <!-- <p>新鲜出炉 品质靠谱</p> -->
                </div>
            </div>
            <img src="./images/新增车型.png" alt="">
            <div style="width: 100%;background-color: #f9d4cb;padding: 10px;justify-content: space-between;">

                <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                    <div style="width: 50%;">
                        <h4 style="color: #e15536;">Step1.点击新增按钮开启Dialog弹框</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/dialog.png" alt="" style="width: 187px;margin-right: 10px;">
                            <img src="./images/background.png" alt="" style="width: 201px;">
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <h4 style="margin-top: 0px;color: #e15536;">Step2.Validate进行校验表单-提交新增数据</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/校验1.png" alt="" style="width: 237px;margin-right: 10px;">
                            <img src="./images/校验2.png" alt="" style="width: 151px;margin-left: 20px;">
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div style="width: 50%;">
                        <h4 style="margin-top: 10px;color: #e15536;">Step3.点击确认/取消按钮-关闭弹窗重置表单数据</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/点击重置.png" alt="" style="width: 237px;margin-right: 10px;">
                            <!-- <img src="./images/搜索演示1.png" alt="" style="width: 291px;"> -->
                        </div>
                    </div>
                    <!-- <div style="width: 50%;margin-top: ;">
                    <img src="./images/car-example2.png" style="height: 200px;width: 500px;margin-left: 20px;margin-top: 20px;" alt="">
                </div> -->
                </div>
            </div>
            <!-- 编辑车型 -->
            <div class="top">
                <div class="title" style="display: flex;align-items: center;margin-bottom: 10px;">

                    <span class="spinner-grow text-secondary" role="status" style="margin-left: 7px;">
                        <span class="visually-hidden">Loading...</span>
                    </span>
                    <h3 style="margin-left: 17px;">编辑车型</h3>
                    <!-- <p>新鲜出炉 品质靠谱</p> -->
                </div>
            </div>
            <div style="text-align: center;">

                <img src="./images/编辑.png" alt="" style="width: 700px;">
            </div>
            <div style="width: 100%;background-color: #f9d4cb;padding: 10px;justify-content: space-between;">

                <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                    <div style="width: 50%;">
                        <h4 style="color: #e15536;">Step1.点击编辑按钮开启弹框数据回填</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/编辑传参.png" alt="" style="width: 227px;margin-right: 10px;">
                            <img src="./images/点击编辑按钮.png" alt="" style="width: 261px;">
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <h4 style="margin-top: 0px;color: #e15536;">Step2.点击确定按钮调用编辑接口</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/确定编辑.png" alt="" style="width: 237px;margin-right: 10px;">
                            <span style="color: #e36043;">利用编辑接口存下的id判断新增/编辑<br>文本</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 删除车型 -->
            <div class="top">
                <div class="title" style="display: flex;align-items: center;margin-bottom: 10px;">

                    <span class="spinner-grow text-secondary" role="status" style="margin-left: 7px;">
                        <span class="visually-hidden">Loading...</span>
                    </span>
                    <h3 style="margin-left: 17px;">删除车型</h3>
                    <!-- <p>新鲜出炉 品质靠谱</p> -->
                </div>
            </div>
            <div style="text-align: center;">
                <img src="./images/删除.png" alt="">
            </div>
            <div style="width: 100%;background-color: #f9d4cb;padding: 10px;justify-content: space-between;">

                <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                    <div style="width: 50%;">
                        <h4 style="color: #e15536;">点击删除按钮调用接口删除数据</h4>
                        <div style="display: flex;margin-top: 20px;">
                            <img src="./images/删除按钮.png" alt="" style="width: 227px;margin-right: 10px;">
                        </div>
                    </div>

                </div>
            </div>


        </div>
    </div>

    </div>


    <!-- 新鲜好物结束 -->



    <script src="../../assets/js/vendor/jquery.min.js" type="text/javascript"></script>
    <script src="../../assets/js/vendor/popper.min.js" type="text/javascript"></script>
    <script src="../../assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../assets/js/functions.js" type="text/javascript"></script>

    <!-- Animation -->
    <script src="../../assets/js/vendor/aos.js" type="text/javascript"></script>
</body>

</html>